<template>
  <view class="project-list">
    <view class="list-content">
      <view v-if="!projects.length" class="no-content">暂无数据</view>
      <view
          class="list-item"
          :class="{'pending-approve': item.pendingApprove}"
          v-for="item in projects"
          :key="item.key"
          @click="toProjectSetting(item)">
        <view class="project-info">
          <view class="project-name-box">
            <view class="project-name">
              <text class="iconfont icon-project"></text>
              <text class="name">{{ item.name }}</text>
            </view>
            <view v-if="item.pendingApprove" class="lamp-count">
              <text class="iconfont icon-warning-fill"></text>
              <text class="count">{{ item.stateText }}</text>
            </view>
            <view v-else class="lamp-count">
              <text class="iconfont icon-lamp"></text>
              <text class="count">{{ item.lampCount }}</text>
            </view>
          </view>
          <view class="location-info">{{ item.locationInfo }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import mixin from '@/mixins/index.js'
export default {
  mixins: [mixin],
  data() {
    return {
      projects: [],
      pagination: {
        pageNo: 1,
        pageSize: 10,
        totalPageCount: 0
      }
    }
  },
  onLoad() {
  },
  onShow() {
    wx.hideHomeButton()
    this.getProjectList()
  },
  onPullDownRefresh() {
    this.getProjectList()
  },
  methods: {
    setTitle(projectCount) {
      uni.setNavigationBarTitle({
        title: `项目列表${projectCount ? `(${projectCount})` : ''}`
      })
    },
    getProjectList() {
      const self = this
      uni.request({
        url: '/project/list',
        data: {},
        success(result) {
          if (result.data.success && Array.isArray(result.data.data)) {
            const arr = []
            result.data.data.forEach(item => {
              const projectItem = {
                key: item.id,
                projectId: item.id,
                name: item.name || '',
                locationInfo: item.address || '',
                userName: item.user_name || '',
                lampCount: item._node_count || 0,
                stateText: '',
                pendingApprove: false
              }
              if (item.mem_state === 0) {
                projectItem.stateText = '申请中';
                projectItem.pendingApprove = true;
              }
              if (item.mem_state === 2) {
                projectItem.stateText = '申请被拒绝';
                projectItem.pendingApprove = true;
              }
              arr.push(projectItem)
            })
            self.projects = arr
          }
        },
        complete() {
          uni.stopPullDownRefresh()
        }
      })
    },
    toProjectSetting(project) {
      if (project.pendingApprove) return
      uni.navigateTo({
        url: `/pages/settings/project-setting/project-setting?id=${project.projectId}`
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.project-list {
  position: relative;
  padding: 30rpx;
}
.list-content {
  position: relative;
  z-index: 1;
  .no-content {
    margin-top: 40vh;
    text-align: center;
    color: $text-secondary;
  }
  .list-item {
    background-color: $white;
    border-radius: 10rpx;
    margin-top: 20rpx;
    position: relative;
    padding: 26rpx 30rpx;
    &.pending-approve {
      background-color: rgba($warning, 0.08);
      .lamp-count {
        color: $warning !important;
      }
    }
    &:first-child {
      margin-top: 0;
    }
    .project-info {
      position: relative;
      z-index: 2;
      .project-name-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .project-name {
        font-size: $font-size-6;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 480rpx;
        .iconfont {
          color: $primary;
        }
        .name {
          margin-left: 10rpx;
        }
      }
      .lamp-count {
        color: $success;
        font-size: $font-size-3;
        .count {
          margin-left: 10rpx;
        }
      }
      .location-info {
        margin-top: 10rpx;
        font-size: $font-size-2;
        color: $text-secondary;
      }
    }
  }
}
</style>
